import Card from '@/components/Card';
import Description from '@/components/Description';
import { envDeviceControllerGetRealTimeFireDetectorData } from '@/services/ess/deviceEnv';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { useIntl } from '@umijs/max';
import type { DescriptionsProps } from 'antd/es/descriptions';
import React, { useEffect, useState } from 'react';
import Style from '../../index.less';

interface propsType {
  deviceCode?: string;
}

const Index: React.FC<propsType> = ({ deviceCode }) => {
  const intl = useIntl();
  let Options_type1: any[] = [];
  let Options_online: any[] = [];
  let Options_faultstatus: any[] = [];
  const [overallState, setoverallState] = useState<DescriptionsProps['items']>([
    {
      key: 'co',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.carbonMonoxideConcentration' }),
      children: '',
    },
    {
      key: 'voc',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.electrolyte' }),
      children: '',
    },
    {
      key: 'temp',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.temperatureSensor' }),
      children: '',
    },
    {
      key: 'smoke',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.smokeSensor' }),
      children: '',
    },
  ]);

  const [baseInfo, setbaseInfo] = useState<DescriptionsProps['items']>([
    {
      key: 'enableState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.isEnable' }),
      children: '',
    },
    {
      key: 'onlineState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.onlineStatus' }),
      children: '',
    },
    {
      key: 'product',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceModel' }),
      children: '',
    },
    {
      key: 'disabled',
      label: '',
      children: '',
      hidden: true,
    },
  ]);

  const changeFuntion = (key: any, result: any) => {
    const array = ['enableState'];
    const array_onlineState = ['onlineState'];
    const array_faultState = ['faultState'];
    if (array.includes(key)) {
      return Options_type1.find((res) => res.value === result)?.['label'] || '';
    } else if (array_onlineState.includes(key)) {
      return Options_online?.find((res) => res.value === result)?.['label'] || '';
    } else if (array_faultState.includes(key)) {
      return Options_faultstatus?.find((res) => res.value === result)?.['label'] || '';
    } else {
      return result;
    }
  };

  const changeContent = () => {
    envDeviceControllerGetRealTimeFireDetectorData({
      deviceCode: deviceCode,
    }).then((res) => {
      const desc1 = overallState.map((item) => {
        // console.log(res.data?.[item.key],"sjdlkfsjd")
        return {
          ...item,
          children: changeFuntion(item.key, res.data?.[item.key]),
        };
      });
      setoverallState(desc1);

      const desc4 = baseInfo.map((item) => {
        return {
          ...item,
          children: changeFuntion(item.key, res.data?.[item.key]),
        };
      });
      setbaseInfo(desc4);
    });
  };

  useEffect(() => {
    Promise.all([
      fetchDictInfo(DATABASE_TYPE_ENUM.ENABLE_DEVI, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.DEHUMIDIFICATION_FAULT_STATE, true),
    ]).then((res) => {
      let length = res.length;
      Options_type1 = res[0];
      Options_online = res[length - 2];
      Options_faultstatus = res[length - 1];
      changeContent();
    });
  }, []);

  const column = { xxl: 3, xl: 2, lg: 1, md: 1, sm: 1 };

  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 0,
        flexDirection: 'column',
      }}
    >
      <Card
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.operationParams' })}
        className={Style.CardStyle}
      >
        <Description items={overallState} column={column} />
      </Card>
      <Card
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.basicInformation' })}
        className={Style.CardStyle}
      >
        <Description items={baseInfo} column={column} />
      </Card>
    </div>
  );
};

export default Index;
